<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Apricot 1.3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<script type="text/javascript" src="assets/js/jquery.js"></script>

<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/loader-style.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">

<link href="assets/js/iCheck/flat/all.css" rel="stylesheet">
<link href="assets/js/iCheck/line/all.css" rel="stylesheet">

<link href="assets/js/colorPicker/bootstrap-colorpicker.css"
	rel="stylesheet">
<link href="assets/js/switch/bootstrap-switch.css" rel="stylesheet">
<link href="assets/js/validate/validate.css" rel="stylesheet">
<link href="assets/js/idealform/css/jquery.idealforms.css"
	rel="stylesheet">






<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/minus.png">
</head>

<body>
	<div id="awwwards" class="right black">
		<a
			href="http://www.awwwards.com/best-websites/apricot-navigation-admin-dashboard-template"
			target="_blank">best websites of the world</a>
	</div>
	<!-- Preloader -->
	<div id="preloader">
		<div id="status">&nbsp;</div>
	</div>
	<!-- TOP NAVBAR -->
	<nav role="navigation" class="navbar navbar-static-top">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button data-target="#bs-example-navbar-collapse-1"
					data-toggle="collapse" class="navbar-toggle" type="button">
					<span class="entypo-menu"></span>
				</button>
				<button class="navbar-toggle toggle-menu-mobile toggle-left"
					type="button">
					<span class="entypo-list-add"></span>
				</button>




				<div id="logo-mobile" class="visible-xs">
					<h1>
						Apricot<span>v1.3</span>
					</h1>
				</div>

			</div>


			<!-- Collect the nav links, forms, and other content for toggling -->
			<div id="bs-example-navbar-collapse-1"
				class="collapse navbar-collapse">
				<ul class="nav navbar-nav">

					<li class="dropdown"><a data-toggle="dropdown"
						class="dropdown-toggle" href="#"><i style="font-size: 20px;"
							class="icon-conversation"></i>
						<div class="noft-red">23</div></a>


						<ul style="margin: 11px 0 0 9px;" role="menu"
							class="dropdown-menu dropdown-wrap">
							<li><a href="#"> <img alt="" class="img-msg img-circle"
									src="http://api.randomuser.me/portraits/thumb/men/1.jpg">Jhon
									Doe <b>Just Now</b>
							</a></li>
							<li class="divider"></li>
							<li><a href="#"> <img alt="" class="img-msg img-circle"
									src="http://api.randomuser.me/portraits/thumb/women/1.jpg">Jeniffer
									<b>3 Min Ago</b>
							</a></li>
							<li class="divider"></li>
							<li><a href="#"> <img alt="" class="img-msg img-circle"
									src="http://api.randomuser.me/portraits/thumb/men/2.jpg">Dave
									<b>2 Hours Ago</b>
							</a></li>
							<li class="divider"></li>
							<li><a href="#"> <img alt="" class="img-msg img-circle"
									src="http://api.randomuser.me/portraits/thumb/men/3.jpg"><i>Keanu</i>
									<b>1 Day Ago</b>
							</a></li>
							<li class="divider"></li>
							<li><a href="#"> <img alt="" class="img-msg img-circle"
									src="http://api.randomuser.me/portraits/thumb/men/4.jpg"><i>Masashi</i>
									<b>2 Mounth Ago</b>
							</a></li>
							<li class="divider"></li>
							<li>
								<div>See All Messege</div>
							</li>
						</ul></li>
					<li><a data-toggle="dropdown" class="dropdown-toggle" href="#"><i
							style="font-size: 19px;" class="icon-warning tooltitle"></i>
						<div class="noft-green">5</div></a>
						<ul style="margin: 12px 0 0 0;" role="menu"
							class="dropdown-menu dropdown-wrap">
							<li><a href="#"> <span style="background: #DF2135"
									class="noft-icon maki-bus"></span><i>From Station</i> <b>01B</b>
							</a></li>
							<li class="divider"></li>
							<li><a href="#"> <span style="background: #AB6DB0"
									class="noft-icon maki-ferry"></span><i>Departing at</i> <b>9:00
										AM</b>
							</a></li>
							<li class="divider"></li>
							<li><a href="#"> <span style="background: #FFA200"
									class="noft-icon maki-aboveground-rail"></span><i>Delay for</i>
									<b>09 Min</b>
							</a></li>
							<li class="divider"></li>
							<li><a href="#"> <span style="background: #86C440"
									class="noft-icon maki-airport"></span><i>Take of</i> <b>08:30
										AM</b>
							</a></li>
							<li class="divider"></li>
							<li><a href="#"> <span style="background: #0DB8DF"
									class="noft-icon maki-bicycle"></span><i>Take of</i> <b>08:30
										AM</b>
							</a></li>
							<li class="divider"></li>
							<li>
								<div>See All Notification</div>
							</li>
						</ul></li>
					<li><a href="#"><i data-toggle="tooltip"
							data-placement="bottom" title="Help" style="font-size: 20px;"
							class="icon-help tooltitle"></i></a></li>

				</ul>
				<div id="nt-title-container"
					class="navbar-left running-text visible-lg">
					<ul class="date-top">
						<li class="entypo-calendar" style="margin-right: 5px"></li>
						<li id="Date"></li>


					</ul>

					<ul id="digital-clock" class="digital">
						<li class="entypo-clock" style="margin-right: 5px"></li>
						<li class="hour"></li>
						<li>:</li>
						<li class="min"></li>
						<li>:</li>
						<li class="sec"></li>
						<li class="meridiem"></li>
					</ul>
					<ul id="nt-title">
						<li><i class="wi-day-lightning"></i>&#160;&#160;Berlin&#160;
							<b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h</li>
						<li><i class="wi-day-lightning"></i>&#160;&#160;Yogyakarta&#160;
							<b>85</b><i class="wi-fahrenheit"></i>&#160;; Tonight- 72 °F
							(22.2 °C)</li>

						<li><i class="wi-day-lightning"></i>&#160;&#160;Sttugart&#160;
							<b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h</li>

						<li><i class="wi-day-lightning"></i>&#160;&#160;Muchen&#160;
							<b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h</li>

						<li><i class="wi-day-lightning"></i>&#160;&#160;Frankurt&#160;
							<b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h</li>

					</ul>
				</div>

				<ul style="margin-right: 0;" class="nav navbar-nav navbar-right">
					<li><a data-toggle="dropdown" class="dropdown-toggle" href="#">
							<img alt="" class="admin-pic img-circle"
							src="http://api.randomuser.me/portraits/thumb/men/10.jpg">Hi,
							Dave Mattew <b class="caret"></b>
					</a>
						<ul style="margin-top: 14px;" role="menu"
							class="dropdown-setting dropdown-menu">
							<li><a href="#"> <span class="entypo-user"></span>&#160;&#160;My
									Profile
							</a></li>
							<li><a href="#"> <span class="entypo-vcard"></span>&#160;&#160;Account
									Setting
							</a></li>
							<li><a href="#"> <span class="entypo-lifebuoy"></span>&#160;&#160;Help
							</a></li>
							<li class="divider"></li>
							<li><a
								href="http://themeforest.net/item/apricot-navigation-admin-dashboard-template/7664475?WT.ac=category_item&WT.z_author=themesmile">
									<span class="entypo-basket"></span>&#160;&#160; Purchase
							</a></li>
						</ul></li>
					<li><a data-toggle="dropdown" class="dropdown-toggle" href="#">
							<span class="icon-gear"></span>&#160;&#160;Setting
					</a>
						<ul role="menu" class="dropdown-setting dropdown-menu">

							<li class="theme-bg">
								<div id="button-bg"></div>
								<div id="button-bg2"></div>
								<div id="button-bg3"></div>
								<div id="button-bg5"></div>
								<div id="button-bg6"></div>
								<div id="button-bg7"></div>
								<div id="button-bg8"></div>
								<div id="button-bg9"></div>
								<div id="button-bg10"></div>
								<div id="button-bg11"></div>
								<div id="button-bg12"></div>
								<div id="button-bg13"></div>
							</li>
						</ul></li>
					<li class="hidden-xs"><a class="toggle-left" href="#"> <span
							style="font-size: 20px;" class="entypo-list-add"></span>
					</a></li>
				</ul>

			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>

	<!-- /END OF TOP NAVBAR -->

	<!-- SIDE MENU -->
	<div id="skin-select">
		<div id="logo">
			<h1>
				Apricot<span>v1.3</span>
			</h1>
		</div>

		<a id="toggle"> <span class="entypo-menu"></span>
		</a>
		<div class="dark">
			<form action="#">
				<span> <input type="text" name="search" value=""
					class="search rounded id_search" placeholder="Search Menu..."
					autofocus="">
				</span>
			</form>
		</div>

		<div class="search-hover">
			<form id="demo-2">
				<input type="search" placeholder="Search Menu..." class="id_search">
			</form>
		</div>

		<div class="skin-part">
			<div id="tree-wrap">
				<div class="side-bar">
					<ul class="topnav menu-left-nest">
						<li><a href="#" style="border-left: 0px solid !important;"
							class="title-menu-left"> <span class="widget-menu"></span> <i
								data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

						</a></li>

						<li><a class="tooltip-tip ajax-load" href="#"
							title="Blog App"> <i class="icon-document-edit"></i> <span>Blog
									App</span>

						</a>
							<ul>
								<li><a class="tooltip-tip2 ajax-load" href="blog-list.html"
									title="Blog List"><i class="entypo-doc-text"></i><span>Blog
											List</span></a></li>
								<li><a class="tooltip-tip2 ajax-load"
									href="blog-detail.html" title="Blog Detail"><i
										class="entypo-newspaper"></i><span>Blog Details</span></a></li>
							</ul></li>
						<li><a class="tooltip-tip ajax-load" href="social.html"
							title="Social"> <i class="icon-feed"></i> <span>Social</span>

						</a></li>
						<li><a class="tooltip-tip ajax-load" href="media.html"
							title="Media"> <i class="icon-camera"></i> <span>Media</span>

						</a></li>
					</ul>

					<ul class="topnav menu-left-nest">
						<li><a href="#" style="border-left: 0px solid !important;"
							class="title-menu-left"> <span class="design-kit"></span> <i
								data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

						</a></li>

						<li><a class="tooltip-tip ajax-load" href="index.html"
							title="Dashboard"> <i class="icon-window"></i> <span>Dashboard</span>

						</a></li>
						<li><a class="tooltip-tip ajax-load" href="mail.html"
							title="Mail"> <i class="icon-mail"></i> <span>mail</span>
								<div class="noft-blue">289</div>
						</a></li>

						<li><a class="tooltip-tip ajax-load" href="icon.html"
							title="Icons"> <i class="icon-preview"></i> <span>Icons</span>
								<div class="noft-blue"
									style="display: inline-block; float: none;">New</div>
						</a></li>

						<li><a class="tooltip-tip" href="#" title="Extra Pages">
								<i class="icon-document-new"></i> <span>Extra Page</span>
						</a>
							<ul>
								<li><a class="tooltip-tip2 ajax-load"
									href="blank_page.html" title="Blank Page"><i
										class="icon-media-record"></i><span>Blank Page</span></a></li>
								<li><a class="tooltip-tip2 ajax-load" href="profile.html"
									title="Profile Page"><i class="icon-user"></i><span>Profile
											Page</span></a></li>
								<li><a class="tooltip-tip2 ajax-load" href="invoice.html"
									title="Invoice"><i class="entypo-newspaper"></i><span>Invoice</span></a>
								</li>
								<li><a class="tooltip-tip2 ajax-load"
									href="pricing_table.html" title="Pricing Table"><i
										class="fontawesome-money"></i><span>Pricing Table</span></a></li>
								<li><a class="tooltip-tip2 ajax-load" href="time-line.html"
									title="Time Line"><i class="entypo-clock"></i><span>Time
											Line</span></a></li>
								<li><a class="tooltip-tip2" href="404.html"
									title="404 Error Page"><i class="icon-thumbs-down"></i><span>404
											Error Page</span></a></li>
								<li><a class="tooltip-tip2" href="500.html"
									title="500 Error Page"><i class="icon-thumbs-down"></i><span>500
											Error Page</span></a></li>
								<li><a class="tooltip-tip2" href="lock-screen.html"
									title="Lock Screen"><i class="icon-lock"></i><span>Lock
											Screen</span></a></li>
							</ul></li>

						<li><a class="tooltip-tip " href="login.html" title="login">
								<i class="icon-download"></i> <span>Login</span>
						</a></li>

					</ul>

					<ul id="menu-showhide" class="topnav menu-left-nest">
						<li><a href="#" style="border-left: 0px solid !important;"
							class="title-menu-left"> <span class="component"></span> <i
								data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

						</a></li>


						<li><a class="tooltip-tip" href="#" title="UI Element"> <i
								class="icon-monitor"></i> <span>UI Element</span>
						</a>
							<ul>
								<li><a class="tooltip-tip2 ajax-load" href="element.html"
									title="Element"><i class="icon-attachment"></i><span>Element</span></a>
								</li>
								<li><a class="tooltip-tip2 ajax-load" href="button.html"
									title="Button"><i class="icon-view-list-large"></i><span>Button</span>
										<div class="noft-blue-number">10</div></a></li>
								<li><a class="tooltip-tip2 ajax-load" href="wizard.html"
									title="Tab & Accordion"><i class="icon-folder"></i><span>Wizard</span>
									<div class="noft-purple-number">3</div></a></li>
								<li><a class="tooltip-tip2 ajax-load" href="calendar.html"
									title="Calender"><i class="icon-calendar"></i><span>Calendar</span></a>
								</li>
								<li><a class="tooltip-tip2 ajax-load" href="tree.html"
									title="Tree View"><i class="icon-view-list"></i><span>Tree
											View</span></a></li>
								<li><a class="tooltip-tip2 ajax-load" href="grids.html"
									title="Grids"><i class="icon-menu"></i><span>Grids</span></a></li>
								<li><a class="tooltip-tip2 ajax-load" href="chart.html"
									title="Chart"><i class="icon-graph-pie"></i><span>Chart</span></a>
								</li>
								<li><a class="tooltip-tip ajax-load"
									href="typhography.html" title="Typhoghrapy"> <i
										class="icon-information"></i> <span>Typhoghrapy</span>
								</a></li>
							</ul></li>
						<li><a class="tooltip-tip" href="#" title="Form"> <i
								class="icon-document"></i> <span>Form</span>
						</a>
							<ul>
								<li class="active"><a class="tooltip-tip2 ajax-load"
									href="form-element.html" title="Form Elements"><i
										class="icon-document-edit"></i><span>Form Elements</span></a></li>
								<li><a class="tooltip-tip2 ajax-load"
									href="andvance-form.html" title="Andvance Form"><i
										class="icon-map"></i><span>Andvance Form</span></a></li>
								<li><a class="tooltip-tip2 ajax-load"
									href="text-editor.html" title="Text Editor"><i
										class="icon-code"></i><span>Text Editor</span></a></li>
								<li><a class="tooltip-tip2 ajax-load"
									href="file-upload.html" title="File Upload"><i
										class="icon-upload"></i><span>File Upload</span></a></li>
							</ul></li>
						<li><a class="tooltip-tip" href="#" title="Tables"> <i
								class="icon-view-thumb"></i> <span>Tables</span>
						</a>
							<ul>
								<li><a class="tooltip-tip2 ajax-load"
									href="table-static.html" title="Table Static"><i
										class="entypo-layout"></i><span>Table Static</span></a></li>
								<li><a class="tooltip-tip2 ajax-load"
									href="table-dynamic.html" title="Table Dynamic"><i
										class="entypo-menu"></i><span>Table Dynamic</span></a></li>
							</ul></li>

						<li><a class="tooltip-tip ajax-load" href="map.html"
							title="Map"> <i class="icon-location"></i> <span>Map</span>

						</a></li>
					</ul>


					<div class="side-dash">
						<h3>
							<span>Device</span>
						</h3>
						<ul class="side-dashh-list">
							<li>Avg. Traffic <span>25k<i style="color: #44BBC1;"
									class="fa fa-arrow-circle-up"></i>
							</span>
							</li>
							<li>Visitors <span>80%<i style="color: #AB6DB0;"
									class="fa fa-arrow-circle-down"></i>
							</span>
							</li>
							<li>Convertion Rate <span>13m<i
									style="color: #19A1F9;" class="fa fa-arrow-circle-up"></i>
							</span>
							</li>
						</ul>
						<h3>
							<span>Traffic</span>
						</h3>
						<ul class="side-bar-list">
							<li>Avg. Traffic
								<div class="linebar">5,7,8,9,3,5,3,8,5</div>
							</li>
							<li>Visitors
								<div class="linebar2">9,7,8,9,5,9,6,8,7</div>
							</li>
							<li>Convertion Rate
								<div class="linebar3">5,7,8,9,3,5,3,8,5</div>
							</li>
						</ul>
						<h3>
							<span>Visitors</span>
						</h3>
						<div id="g1" style="height: 180px" class="gauge"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- END OF SIDE MENU -->



	<!--  PAPER WRAP -->
	<div class="wrap-fluid">
		<div class="container-fluid paper-wrap bevel tlbr">





			<!-- CONTENT -->
			<!--TITLE -->
			<div class="row">
				<div id="paper-top">
					<div class="col-sm-3">
						<h2 class="tittle-content-header">
							<i class="icon-document-edit"></i> <span>Form Element </span>
						</h2>

					</div>

					<div class="col-sm-7">
						<div class="devider-vertical visible-lg"></div>
						<div class="tittle-middle-header">

							<div class="alert">
								<button type="button" class="close" data-dismiss="alert">×</button>
								<span class="tittle-alert entypo-info-circled"></span> Welcome
								back,&nbsp; <strong>Dave mattew!</strong>&nbsp;&nbsp;Your last
								sig in at Yesterday, 16:54 PM
							</div>


						</div>

					</div>
					<div class="col-sm-2">
						<div class="devider-vertical visible-lg"></div>
						<div class="btn-group btn-wigdet pull-right visible-lg">
							<div class="btn">Widget</div>
							<button data-toggle="dropdown" class="btn dropdown-toggle"
								type="button">
								<span class="caret"></span> <span class="sr-only">Toggle
									Dropdown</span>
							</button>
							<ul role="menu" class="dropdown-menu">
								<li><a href="#"> <span
										class="entypo-plus-circled margin-iconic"></span>Add New
								</a></li>
								<li><a href="#"> <span
										class="entypo-heart margin-iconic"></span>Favorite
								</a></li>
								<li><a href="#"> <span class="entypo-cog margin-iconic"></span>Setting
								</a></li>
							</ul>
						</div>


					</div>
				</div>
			</div>
			<!--/ TITLE -->

			<!-- BREADCRUMB -->
			<ul id="breadcrumb">
				<li><span class="entypo-home"></span></li>
				<li><i class="fa fa-lg fa-angle-right"></i></li>
				<li><a href="#" title="Sample page 1">Form</a></li>
				<li><i class="fa fa-lg fa-angle-right"></i></li>
				<li><a href="#" title="Sample page 1">Form Element</a></li>
				<li class="pull-right">
					<div class="input-group input-widget">

						<input style="border-radius: 15px" type="text"
							placeholder="Search..." class="form-control">
					</div>
				</li>
			</ul>

			<!-- END OF BREADCRUMB -->


			<div class="content-wrap">
				<div class="row">


					<div class="col-sm-12">
						<div class="nest" id="basicClose">
							<div class="title-alt">
								<h6>Basic</h6>
								<div class="titleClose">
									<a class="gone" href="#basicClose"> <span
										class="entypo-cancel"></span>
									</a>
								</div>
								<div class="titleToggle">
									<a class="nav-toggle-alt" href="#basic"> <span
										class="entypo-up-open"></span>
									</a>
								</div>

							</div>

							<div class="body-nest" id="basic">
								<div class="form_center">
									<form role="form">
										<div class="form-group">
											<label for="exampleInputEmail1">Email address</label> <input
												type="email" placeholder="Enter email"
												id="exampleInputEmail1" class="form-control">
										</div>
										<div class="form-group">
											<label for="exampleInputPassword1">Password</label> <input
												type="password" placeholder="Password"
												id="exampleInputPassword1" class="form-control">
										</div>
										<div class="form-group">
											<label for="exampleInputFile">File input</label> <input
												type="file" id="exampleInputFile">
											<p class="help-block">Example block-level help text here.</p>
										</div>
										<div class="checkbox">
											<label> <input type="checkbox">Check me out
											</label>
										</div>
										<button class="btn btn-info" type="submit">Submit</button>
									</form>
								</div>


							</div>

						</div>
					</div>

				</div>
			</div>




			<div class="content-wrap">
				<div class="row">
					<div class="col-sm-12">
						<div class="nest" id="horizontalClose">
							<div class="title-alt">
								<h6>Horizontal Forms</h6>
								<div class="titleClose">
									<a class="gone" href="#horizontalClose"> <span
										class="entypo-cancel"></span>
									</a>
								</div>
								<div class="titleToggle">
									<a class="nav-toggle-alt" href="#horizontal"> <span
										class="entypo-up-open"></span>
									</a>
								</div>

							</div>

							<div class="body-nest" id="horizontal">

								<div class="form_center">
									<form role="form" class="form-horizontal">
										<div class="form-group">
											<label class="col-lg-2 col-sm-2 control-label"
												for="inputEmail1">Email</label>
											<div class="col-lg-10">
												<input type="email" placeholder="Email" id="inputEmail1"
													class="form-control">
												<p class="help-block">Example block-level help text
													here.</p>
											</div>
										</div>
										<div class="form-group">
											<label class="col-lg-2 col-sm-2 control-label"
												for="inputPassword1">Password</label>
											<div class="col-lg-10">
												<input type="password" placeholder="Password"
													id="inputPassword1" class="form-control">
											</div>
										</div>
										<div class="form-group">
											<div class="col-lg-offset-2 col-lg-10">
												<div class="checkbox">
													<label> <input type="checkbox">Remember me
													</label>
												</div>
											</div>
										</div>
										<div class="form-group">
											<div class="col-lg-offset-2 col-lg-10">
												<button class="btn btn-danger" type="submit">Sign
													in</button>
											</div>
										</div>
									</form>
								</div>

							</div>

						</div>
					</div>
				</div>
			</div>



			<div class="content-wrap">
				<div class="row">
					<div class="col-sm-12">
						<div class="nest" id="inlineClose">
							<div class="title-alt">
								<h6>Inline form</h6>
								<div class="titleClose">
									<a class="gone" href="#inlineClose"> <span
										class="entypo-cancel"></span>
									</a>
								</div>
								<div class="titleToggle">
									<a class="nav-toggle-alt" href="#inline"> <span
										class="entypo-up-open"></span>
									</a>
								</div>

							</div>

							<div class="body-nest" id="inline">

								<div class="form_center">
									<form role="form" class="form-inline">
										<div class="form-group">
											<label for="exampleInputEmail2" class="sr-only">Email
												address</label> <input type="email" placeholder="Enter email"
												id="exampleInputEmail2" class="form-control">
										</div>
										<div class="form-group">
											<label for="exampleInputPassword2" class="sr-only">Password</label>
											<input type="password" placeholder="Password"
												id="exampleInputPassword2" class="form-control">
										</div>
										<div class="checkbox">
											<label> <input type="checkbox">Remember me
											</label>
										</div>
										<button class="btn btn-success" type="submit">Sign in</button>
									</form>
								</div>

							</div>

						</div>
					</div>
				</div>
			</div>




			<div class="content-wrap">
				<div class="row">
					<div class="col-sm-12">
						<div class="nest" id="elementClose">
							<div class="title-alt">
								<h6>Form Elements</h6>
								<div class="titleClose">
									<a class="gone" href="#elementClose"> <span
										class="entypo-cancel"></span>
									</a>
								</div>
								<div class="titleToggle">
									<a class="nav-toggle-alt" href="#element"> <span
										class="entypo-up-open"></span>
									</a>
								</div>

							</div>

							<div class="body-nest" id="element">

								<div class="panel-body">
									<form method="get" class="form-horizontal bucket-form">
										<div class="form-group">
											<label class="col-sm-3 control-label">Default</label>
											<div class="col-sm-6">
												<input type="text" class="form-control">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">Help text</label>
											<div class="col-sm-6">
												<input type="text" class="form-control"> <span
													class="help-block">A block of help text that breaks
													onto a new line and may extend beyond one line.</span>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">Rounder</label>
											<div class="col-sm-6">
												<input type="text" class="form-control round-input">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">Input focus</label>
											<div class="col-sm-6">
												<input type="text" value="This is focused..."
													id="focusedInput" class="form-control">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">Disabled</label>
											<div class="col-sm-6">
												<input type="text" disabled=""
													placeholder="Disabled input here..." id="disabledInput"
													class="form-control">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">Placeholder</label>
											<div class="col-sm-6">
												<input type="text" placeholder="placeholder"
													class="form-control">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">Password</label>
											<div class="col-sm-6">
												<input type="password" placeholder="" class="form-control">
											</div>
										</div>
										<div class="form-group">
											<label class=" col-sm-3 control-label">Static control</label>
											<div class="col-lg-6">
												<p class="form-control-static">
													email@example.com
													<script type="text/javascript">
                                                    /* &lt;![CDATA[ */
                                                    (function() {
                                                        try {
                                                            var s, a, i, j, r, c, l, b = document.getElementsByTagName("script");
                                                            l = b[b.length - 1].previousSibling;
                                                            a = l.getAttribute('data-cfemail');
                                                            if (a) {
                                                                s = '';
                                                                r = parseInt(a.substr(0, 2), 16);
                                                                for (j = 2; a.length - j; j += 2) {
                                                                    c = parseInt(a.substr(j, 2), 16) ^ r;
                                                                    s += String.fromCharCode(c);
                                                                }
                                                                s = document.createTextNode(s);
                                                                l.parentNode.replaceChild(s, l);
                                                            }
                                                        } catch (e) {}
                                                    })();
                                                    /* ]]&gt; */
                                                    </script>
												</p>
											</div>
										</div>
										<div class="form-group has-success">
											<label for="inputSuccess"
												class="col-sm-3 control-label col-lg-3">Input with
												success</label>
											<div class="col-lg-6">
												<input type="text" id="inputSuccess" class="form-control">
											</div>
										</div>
										<div class="form-group has-warning">
											<label for="inputWarning"
												class="col-sm-3 control-label col-lg-3">Input with
												warning</label>
											<div class="col-lg-6">
												<input type="text" id="inputWarning" class="form-control">
											</div>
										</div>
										<div class="form-group has-error">
											<label for="inputError"
												class="col-sm-3 control-label col-lg-3">Input with
												error</label>
											<div class="col-lg-6">
												<input type="text" id="inputError" class="form-control">
											</div>
										</div>
									</form>
								</div>

							</div>

						</div>
					</div>
				</div>
			</div>



			<div class="content-wrap">
				<div class="row">
					<div class="col-sm-12">
						<div class="nest" id="labelClose">
							<div class="title-alt">
								<h6>Checkbox and radio Button Pretty</h6>
								<div class="titleClose">
									<a class="gone" href="#labelClose"> <span
										class="entypo-cancel"></span>
									</a>
								</div>
								<div class="titleToggle">
									<a class="nav-toggle-alt" href="#label"> <span
										class="entypo-up-open"></span>
									</a>
								</div>

							</div>

							<div class="body-nest" id="label">
								<div class="row">
									<div class="col-sm-6">
										<div class="skin skin-flat">

											<ul class="list">
												<li><input tabindex="13" type="checkbox"
													id="flat-checkbox-1"> <label for="flat-checkbox-1">Checkbox
														1</label></li>
												<li><input tabindex="14" type="checkbox"
													id="flat-checkbox-2" checked=""> <label
													for="flat-checkbox-2">Checkbox 2</label></li>
												<li><input type="checkbox" id="flat-checkbox-disabled"
													disabled=""> <label for="flat-checkbox-disabled">Disabled</label>
												</li>
												<li><input type="checkbox"
													id="flat-checkbox-disabled-checked" checked="" disabled="">
													<label for="flat-checkbox-disabled-checked">Disabled
														&amp; checked</label></li>
											</ul>
											<ul class="list">
												<li><input tabindex="11" type="radio"
													id="square-radio-1" name="square-radio"> <label
													for="square-radio-1">Radio button 1</label></li>
												<li><input tabindex="12" type="radio"
													id="square-radio-2" name="square-radio" checked="">
													<label for="square-radio-2">Radio button 2</label></li>
												<li><input type="radio" id="square-radio-disabled"
													disabled=""> <label for="square-radio-disabled">Disabled</label>
												</li>
												<li><input type="radio"
													id="square-radio-disabled-checked" checked="" disabled="">
													<label for="square-radio-disabled-checked">Disabled
														&amp; checked</label></li>
											</ul>
											<div style="clear: both;"></div>
										</div>
									</div>

									<div class="col-sm-6">
										<div class="skin skin-line">
											<ul class="list">
												<li><input tabindex="17" type="checkbox"
													id="line-checkbox-1"> <label for="line-checkbox-1">Checkbox
														1</label></li>
												<li><input tabindex="18" type="checkbox"
													id="line-checkbox-2" checked=""> <label
													for="line-checkbox-2">Checkbox 2</label></li>
												<li><input type="checkbox" id="line-checkbox-disabled"
													disabled=""> <label for="line-checkbox-disabled">Disabled</label>
												</li>
												<li><input type="checkbox"
													id="line-checkbox-disabled-checked" checked="" disabled="">
													<label for="line-checkbox-disabled-checked">Disabled
														&amp; checked</label></li>
											</ul>
											<ul class="list">
												<li><input tabindex="19" type="radio" id="line-radio-1"
													name="line-radio"> <label for="line-radio-1">Radio
														button 1</label></li>
												<li><input tabindex="20" type="radio" id="line-radio-2"
													name="line-radio" checked=""> <label
													for="line-radio-2">Radio button 2</label></li>
												<li><input type="radio" id="line-radio-disabled"
													disabled=""> <label for="line-radio-disabled">Disabled</label>
												</li>
												<li><input type="radio"
													id="line-radio-disabled-checked" checked="" disabled="">
													<label for="line-radio-disabled-checked">Disabled
														&amp; checked</label></li>
											</ul>
											<div style="clear: both;"></div>
										</div>
									</div>

								</div>

							</div>
						</div>
					</div>
				</div>
			</div>







			<div class="content-wrap">
				<div class="row">
					<div class="col-sm-12">
						<div class="nest" id="switchClose">
							<div class="title-alt">
								<h6>switch</h6>
								<div class="titleClose">
									<a class="gone" href="#switchClose"> <span
										class="entypo-cancel"></span>
									</a>
								</div>
								<div class="titleToggle">
									<a class="nav-toggle-alt" href="#switch"> <span
										class="entypo-up-open"></span>
									</a>
								</div>

							</div>

							<div class="body-nest" id="switch">

								<div class="make-switch" data-on="primary" data-off="info">
									<input type="checkbox" checked="">
								</div>
								<div class="make-switch" data-on="info" data-off="success">
									<input type="checkbox" checked="">
								</div>
								<div class="make-switch" data-on="success" data-off="warning">
									<input type="checkbox" checked="">
								</div>
								<div class="make-switch" data-on="warning" data-off="danger">
									<input type="checkbox" checked="">
								</div>
								<div class="make-switch" data-on="danger" data-off="default">
									<input type="checkbox" checked="">
								</div>

							</div>

						</div>
					</div>
				</div>
			</div>
			<!-- /END OF CONTENT -->



			<!-- FOOTER -->
			<div class="footer-space"></div>
			<div id="footer">
				<div class="devider-footer-left"></div>
				<div class="time">
					<p id="spanDate">
					<p id="clock">
				</div>
				<div class="copyright">
					Make with Love <span class="entypo-heart"></span>2014 <a
						href="http://themeforest.net/item/apricot-navigation-admin-dashboard-template/7664475?WT.ac=category_item&WT.z_author=themesmile">(Themesmile)
						Purchase This Item</a> All Rights Reserved
				</div>
				<div class="devider-footer"></div>

			</div>
			<!-- / END OF FOOTER -->


		</div>
	</div>
	<!--  END OF PAPER WRAP -->
	<!-- RIGHT SLIDER CONTENT -->
	<div class="sb-slidebar sb-right">
		<div class="right-wrapper">
			<div class="row">
				<h3>
					<span><i class="entypo-gauge"></i>&nbsp;&nbsp;MAIN WIDGET</span>
				</h3>
				<div class="col-sm-12">

					<div class="widget-knob">
						<span class="chart" style="position: relative" data-percent="86">
							<span class="percent"></span>
						</span>
					</div>
					<div class="widget-def">
						<b>Distance traveled</b> <br> <i>86% to the check point</i>
					</div>

					<div class="widget-knob">
						<span class="speed-car" style="position: relative"
							data-percent="60"> <span class="percent2"></span>
						</span>
					</div>
					<div class="widget-def">
						<b>The average speed</b> <br> <i>30KM/h avarage speed</i>
					</div>


					<div class="widget-knob">
						<span class="overall" style="position: relative" data-percent="25">
							<span class="percent3"></span>
						</span>
					</div>
					<div class="widget-def">
						<b>Overall result</b> <br> <i>30KM/h avarage Result</i>
					</div>
				</div>
			</div>
		</div>

		<div style="margin-top: 0;" class="right-wrapper">
			<div class="row">
				<h3>
					<span><i class="entypo-chat"></i>&nbsp;&nbsp;CHAT</span>
				</h3>
				<div class="col-sm-12">
					<span class="label label-warning label-chat">Online</span>
					<ul class="chat">
						<li><a href="#"> <span> <img alt=""
									class="img-chat img-circle"
									src="http://api.randomuser.me/portraits/thumb/men/20.jpg">
							</span><b>Dave Junior</b> <br>
							<i>Last seen : 08:00 PM</i>
						</a></li>
						<li><a href="#"> <span> <img alt=""
									class="img-chat img-circle"
									src="http://api.randomuser.me/portraits/thumb/men/21.jpg">
							</span><b>Kenneth Lucas</b> <br>
							<i>Last seen : 07:21 PM</i>
						</a></li>
						<li><a href="#"> <span> <img alt=""
									class="img-chat img-circle"
									src="http://api.randomuser.me/portraits/thumb/men/22.jpg">
							</span><b>Heidi Perez</b> <br>
							<i>Last seen : 05:43 PM</i>
						</a></li>


					</ul>

					<span class="label label-chat">Offline</span>
					<ul class="chat">
						<li><a href="#"> <span> <img alt=""
									class="img-chat img-offline img-circle"
									src="http://api.randomuser.me/portraits/thumb/men/23.jpg">
							</span><b>Dave Junior</b> <br>
							<i>Last seen : 08:00 PM</i>
						</a></li>
						<li><a href="#"> <span> <img alt=""
									class="img-chat img-offline img-circle"
									src="http://api.randomuser.me/portraits/thumb/women/24.jpg">
							</span><b>Kenneth Lucas</b> <br>
							<i>Last seen : 07:21 PM</i>
						</a></li>
						<li><a href="#"> <span> <img alt=""
									class="img-chat img-offline img-circle"
									src="http://api.randomuser.me/portraits/thumb/men/25.jpg">
							</span><b>Heidi Perez</b> <br>
							<i>Last seen : 05:43 PM</i>
						</a></li>
						<li><a href="#"> <span> <img alt=""
									class="img-chat img-offline img-circle"
									src="http://api.randomuser.me/portraits/thumb/women/25.jpg">
							</span><b>Kenneth Lucas</b> <br>
							<i>Last seen : 07:21 PM</i>
						</a></li>
						<li><a href="#"> <span> <img alt=""
									class="img-chat img-offline img-circle"
									src="http://api.randomuser.me/portraits/thumb/men/26.jpg">
							</span><b>Heidi Perez</b> <br>
							<i>Last seen : 05:43 PM</i>
						</a></li>


					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- END OF RIGHT SLIDER CONTENT-->



	<!-- MAIN EFFECT -->
	<script type="text/javascript" src="assets/js/preloader.js"></script>
	<script type="text/javascript" src="assets/js/bootstrap.js"></script>
	<script type="text/javascript" src="assets/js/app.js"></script>
	<script type="text/javascript" src="assets/js/load.js"></script>
	<script type="text/javascript" src="assets/js/main.js"></script>








	<!-- /MAIN EFFECT -->
	<script type="text/javascript" src="assets/js/iCheck/jquery.icheck.js"></script>
	<script type="text/javascript"
		src="assets/js/switch/bootstrap-switch.js"></script>

	<!--  PLUGIN -->
	<script>
    $(document).ready(function() {
        //CHECKBOX PRETTYFY
        $('.skin-flat input').iCheck({
            checkboxClass: 'icheckbox_flat-red',
            radioClass: 'iradio_flat-red'
        });
        $('.skin-line input').each(function() {
            var self = $(this),
                label = self.next(),
                label_text = label.text();

            label.remove();
            self.iCheck({
                checkboxClass: 'icheckbox_line-blue',
                radioClass: 'iradio_line-blue',
                insert: '<div class="icheck_line-icon"></div>' + label_text
            });
        });
        //Switch Button

        $('.make-switch').bootstrapSwitch('setSizeClass', 'switch-small');
    });
    </script>







</body>

</html>
